
import { useEffect, useState } from "react";
import { Text, View, Image } from "@tarojs/components";
import { DatePicker } from "@nutui/nutui-react-taro";
import Tabs from "../../../components/Tabs";
import InfiniteLoading from "../../../components/InfiniteLoading";
import InfiniteLoadingFoot from "../../../components/InfiniteLoadingFoot";
import usePage from "../../../hooks/usePage";
import { totalBg } from "../../assets/files";
import dayjs from "dayjs";

import Taro from "@tarojs/taro";
import { getParams, navigateTo, secondsToMinutes } from "../../../common/_";
import { videoEntMiniTotal, videoAddrMiniTotal, videoMiniTotal, pageVideoEntMiniTotal, pageVideoAddrMiniTotal, pageVideoMiniTotal, } from '../../../api/total'
import "./index.scss";

export default function VideoTotalPages() {

  const [params, setParams] = useState({
    startDate: getParams().startDate,
    endDate: getParams().endDate
  });
  //  const [request,setRequest] = useState('')
  //  const { listData, refreshing, empty, loadMore, onPull, onLoad } = usePage({
  //   request,
  //   params,
  // });

  const { listData, refreshing, empty, loadMore, onPull, onLoad } = usePage({
    request: getUrl(),
    params,
  });

  function getUrl() {
    let type = getParams().type
    if (type === 'video') {
      return pageVideoMiniTotal
    } else if (type === 'area') {
      return pageVideoAddrMiniTotal
    } else if (type === 'company') {
      return pageVideoEntMiniTotal
    }
  }



  const [type, setType] = useState('video')
  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: getParams().title
    })
    setType(getParams().type)
    getPageList(getParams().type)

  }, [])



  const [watchDuration, setWatchDuration] = useState('')
  const [watchPeopleTotal, setWatchPeopleTotal] = useState('')
  const [watchTotal, setWatchTotal] = useState('')

  async function getPageList(type) {
    let data = {}
    if (type === 'video') {
      data = await videoMiniTotal({startDate:params.startDate,endDate:params.endDate})
    } else if (type === 'area') {
      data = await videoAddrMiniTotal({startDate:params.startDate,endDate:params.endDate})
    } else if (type === 'company') {
      data = await videoEntMiniTotal({startDate:params.startDate,endDate:params.endDate})
    }

    const { watchDuration, watchPeopleTotal, watchTotal } = data.data
    setWatchDuration(watchDuration)
    setWatchPeopleTotal(watchPeopleTotal)
    setWatchTotal(watchTotal)
    // setData1(data.list)
  }


  const navigateToDetails = (item) => {
    navigateTo('/pages/text-record-detail/index', {
      userExamId: item.id
    })
  };

  function renderTable(list) {
    if (type === 'video') {
      return (
        <View
          className={"list-item"}
          onClick={() => navigateToDetails(item)}
        >
          {
            list.map(v => {
              return (
                <View className="iteWrap" style={{ flex: 1 }}>
                    <Text className="coltit" style={{ width: '180px', textAlign: "left" }}>{v.name}</Text>
                    {/* <Text className="coltit" style={{ width: '62px' }}>{v.watchDuration ? secondsToMinutes(v.watchDuration) : '-'}</Text> */}
                    <Text className="coltit" style={{ width: '62px' }}>{v.watchPeopleTotal || '-'}</Text>
                    <Text className="coltit" style={{ width: '62px' }}>{v.downloadTotal || '-'}</Text>
                  </View>
              )
            })
          }
        </View>
      )
    } else if (type === 'area' || type === 'company') {
      return (
        <View
          className={"list-item"}
          onClick={() => navigateToDetails(item)}
        >
          {
            list.map(v => {
              return (
                <View className="iteWrap" style={{ flex: 1 }}>
                    <Text className="coltit" style={{ width: '130px', textAlign: "left"}}>{v.name}</Text>
                    <Text className="coltit" style={{ width: '100px' }}>{v.watchPeopleTotal || '-'}</Text>
                    <Text className="coltit" style={{ width: '100px'}}>{v.watchTotal || '-'}</Text>
                  </View>
              )
            })
          }
        </View>
      )
    }
  }

  return (
    <View className={"reservation-record-page"}>

      <View className="column">
        <Image className="tbg" src={totalBg} />
        <View className="topTotal">
          <View className="tWrap" style={{ borderRightWidth: 1, borderRightColor: "rgba(255,255,255,0.4)", borderRightStyle: "solid", marginRight: 24 }}>
            <Text className="toptit">{type === 'video' ? '下载总次数（次）' : '总次数'}</Text>
            <Text className="val">{type === 'video' ? watchDuration  : watchTotal}</Text>
          </View>
          <View className="tWrap">
            <Text className="toptit">总人数</Text>
            <Text className="val">{watchPeopleTotal}</Text>
          </View>
        </View>
      </View>

      <View>
      {
          type === 'video' &&
          <View className="headWrap" style={{ flex: 1 }}>
            <Text className="tit" style={{ width: '180px', textAlign: "left" }}>视频名称</Text>
            {/* <Text className="tit" style={{ width: '62px' }}>观看时间</Text> */}
            <Text className="tit" style={{ width: '62px' }}>观看人数</Text>
            <Text className="tit" style={{ width: '62px' }}>下载(次)</Text>
          </View>
        }

        {
          type === 'area' &&
          <View className="headWrap" style={{ flex: 1 }}>
            <Text className="tit" style={{ width: '130px', textAlign: "left" }}>地区名称</Text>
            <Text className="tit" style={{ width: '100px'}}>总人数</Text>
            <Text className="tit" style={{ width: '100px'}}>观看(次)</Text>
          </View>
        }

        {
          type === 'company' &&
          <View className="headWrap" style={{ flex: 1 }}>
            <Text className="tit" style={{ width: '130px', textAlign: "left" }}>单位名称</Text>
            <Text className="tit" style={{ width: '100px' }}>总人数</Text>
            <Text className="tit" style={{ width: '100px' }}>观看(次)</Text>
          </View>
        }
      </View>

      <View className={"list-wrapper"}>
        

        <InfiniteLoading
          empty={empty}
          onLoad={onLoad}
          onRefresh={onPull}
          refreshing={refreshing}
        >
          {
            renderTable(listData)
          }
          {listData?.length > 0 && <InfiniteLoadingFoot state={loadMore} />}
        </InfiniteLoading>
        
      </View>

    </View>
  );
}

